<template>
    <el-form :model="formInline" class="demo-form-inline">
        <el-form-item label="父级菜单">
      <el-select
        v-model="formInline.parent_id"
        placeholder="请选择父级菜单"
        clearable
      >
        <el-option label="顶级菜单" value="0" />
        <el-option v-for="item in tabelMenu" :label="item.menu_name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="菜单名称">
      <el-input v-model="formInline.menu_name" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="URL">
      <el-input v-model="formInline.menu_url" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="授权">
      <el-input v-model="formInline.perms" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="类型">
      <el-select
        v-model="formInline.type"
        placeholder="请选择类型"
        clearable
      >
        <el-option label="目录" value="0" />
        <el-option label="菜单" value="1" />
        <el-option label="按钮" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="排序">
      <el-input v-model="formInline.order_num" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="菜单图标">
      <el-input v-model="formInline.menu_icon" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="是否启用功能">
        <el-radio-group v-model="formInline.buttontable">
            <el-radio :value="1">是</el-radio>
            <el-radio :value="2">否</el-radio>
         </el-radio-group>
    </el-form-item>
    <el-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :key="domain.key"
      :prop="'domains.' + index + '.value'"
      v-if="formInline.buttontable==1"
    >
      功能名称：<el-input v-model="formInline.permission_name" />
      功能路径：<el-input v-model="formInline.is_perms" />
      <el-button class="mt-2" @click.prevent="removeDomain(domain)">
        删除
      </el-button>
      <el-button @click="addDomain">添加</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { reactive,ref,onMounted } from 'vue'
onMounted(() => {
    GetMenu();
})
const formInline = reactive({
    parent_id:"",
    menu_name:"",
    menu_url:"",
    perms:"",
    type:"",
    menu_icon:"",
    order_num:"",
    buttontable:2,
    permission_name:"",
    is_perms:""
})
interface DomainItem {
  key: number
  value: string
}
const removeDomain = (item: DomainItem) => {
  const index = dynamicValidateForm.domains.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1)
  }
}

const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now(),
    value: '',
  })
}
const dynamicValidateForm = reactive<{
  domains: DomainItem[]
  email: string
}>({
  domains: [
    {
      key: 1,
      value: '',
    },
  ],
  email: '',
})
const onSubmit = () => {
  console.log(formInline)
  let ds={
    parent_id:formInline.parent_id,
    menu_name:formInline.menu_name,
    menu_url:formInline.menu_url,
    perms:formInline.perms,
    type:formInline.type,
    menu_icon:formInline.menu_icon,
    order_num:formInline.order_num,
    button:[{
    permission_name:formInline.permission_name,
    is_perms:formInline.is_perms
    }]
  }
  console.log(ds);
  axios({
    method:"post",
    url:"http://1.117.93.87:8000/rbacxie/api/Menu/menuCreate",
    data:ds
  })
  .then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.message)
    }
  })
}
const tabelMenu=ref([]);
const GetMenu=()=>{
    axios({
        method:"get",
        url:"http://1.117.93.87:8000/rbacdu/api/Menu/MenuSelectShow"
    })
    .then(res=>{
        tabelMenu.value=res.data.data
    })
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
